<template>
  <div class="fill">
    <myHeader></myHeader>
    <div class="fill_natural" v-if="card1.length > 0">
      <p>自然人股东
        <span>（点击名片填写相关信息）</span>
      </p>
      <div>
        <div v-if="card1.length>0" v-for="(item, index) in card1" :key="index" class="fill_natural-card">
          <MyCard :card="card1[index]" />
        </div>
      </div>
    </div>
    <div class="fill_natural" >
      <p v-if="card2.length > 0">非自然人股东
        <span>（点击名片填写相关信息）</span>
      </p>
      <div>
        <div class="fill_natural-card">
          <div v-if="card2.length>0" v-for="(item, index) in card2" :key="index" class="fill_natural-card">
          <MyCard :card="card2[index]" />
          </div>
            <p>企业注册资本：<span>{{regcap || 0}}万元</span></p>
          </div>
      </div>
    </div>
    <div class="bottom">
    <Button type="warning" @click="saveInfo">保存</Button>
    <Button type="primary" @click="gotoNext">下一步</Button>
  </div>
  <MyFooter/>
  </div>
</template>

<script>
  import MyHeader from '../../../components/MyHeader.vue'
  import MyCard from '../../../components/MyCard.vue'
  import request from '../../../utils/request'
  import MyFooter from '../../../components/MyFooter.vue'
  export default {
    data() {
      return {
        regcap: '',
        card1: [],
        card2: []
      }
    },
    components: {
      MyHeader,
      MyCard,
      MyFooter
    },
    methods: {
      queryInvList() {
        let gid = sessionStorage.getItem('gid')
        request.get('/interface/apply/cp/setup/queryInvList.do', {gid: gid}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          } else if (response.data.result === 'success') {
            let repsData = response.data.data
            this.regcap = repsData.regcap
            for (let i = 0; i < repsData.invList.length; i++) {
              if (repsData.invList[i].cerno || repsData.invList[i].invtype === '20') {
                this.card1.push(repsData.invList[i])
              } else if (repsData.invList[i].blicno || repsData.invList[i].invtype === '10' || repsData.invList[i].invtype === '90') {
                this.card2.push(repsData.invList[i])
              }
            }
          }
        })
      },
      saveInfo() {
        this.$SuccessAlert('保存成功')
      },
      gotoNext() {
        this.$router.push({name: 'CompanySuped'})
      }
    },
    mounted() {
      this.queryInvList()
    }
  }

</script>

<style lang="scss">
.fill {
  height: 100%;
  &_natural {
    >p {
      padding: 0.54rem;
      font-weight: 700;
      background: #f3f3f3;
      span {
        font-size: 0.5rem;
        font-weight: 400;
        color: #aaa;
      }
    }
    >div {
      padding: 0.27rem 0;
    }
    &-card {
      padding: 0.27rem 0.54rem;
      overflow: hidden;
      >p {
        float: right;
        padding: 0.32rem 0;
        span {
          color: #f86034;
        }
      }
    }
  }
}
.bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
</style>
